<template>
	<!-- 页面背景 B -->
	<div class="login_container">
		<!-- 登录框 B -->
		<div class="login_box">
			<!-- 固定头像盒子 B -->
			<div class="avatar_box">
				<img src="../assets/logo.png">
			</div>
			<!-- 固定头像盒子 E -->
			<!-- 登录表单区 B -->
			<!-- 引用 ref="loginFormRef", loginFormRef就是表单的实例对象 -->
			<el-form ref="loginFormRef" :rules="loginFormRules" :model="loginForm" class="login_form" label-width="0px">
				<!-- 登录组件 B -->
				<!-- prop是绑定验证规则 -->
				<el-form-item prop="username">
					<el-input v-model="loginForm.username" prefix-icon="iconfont icon-user" ></el-input>
				</el-form-item>
				<!-- 登录组件 E -->
				<!-- 密码组件 B -->
				<el-form-item prop="password">
					<el-input v-model="loginForm.password" prefix-icon="iconfont icon-lock" type="password" ></el-input>
				</el-form-item>
				<!-- 密码组件 E -->
				<!-- 按钮组件 B -->
				<el-form-item class="btns">
					<el-button type="primary" @click="login">登录</el-button>
					<el-button type="info" @click="resetLoginForm">重置</el-button>
				</el-form-item>
				<!-- 按钮组件 E -->
			</el-form>
			<!-- 登录表单区 E -->
		</div>
		<!-- 登录框 E -->
	</div>
	<!-- 页面背景 E -->
</template>

<script>
export default {
  data() {
		      return {
				  // 登陆表单的数据绑定
		        loginForm: {
		          username: 'admin',
		          password: '123456789'
		        },
      // 表单的验证规则
		        loginFormRules: {
        // 验证用户名是否合法
		          username: [
		            { required: true, message: '请输入用户名', trigger: 'blur' },
		            { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
		          ],
				  // 验证密码是否合法
		          password: [
		            { required: true, message: '请输入密码', trigger: 'change' },
          { min: 6, max: 11, message: '长度在 6 到 11 个字符', trigger: 'blur' }
		          ]
		        }
		      }
  },
  methods: {
    // 点击重置按钮,重置登录表单
    resetLoginForm() {
      // console.log(this)
      this.$refs.loginFormRef.resetFields()
    },
    // 登录的验证
    login() {
      // 先发起登录请求
      this.$refs.loginFormRef.validate(async valid => {
        // 如果 false 就 return
        // if(!valid) return;
        // // 在全局js中配置好axios就可以发起post请求,请求地址是 login (我这里地址是假的)
        // const {data: res} = await this.$http.post('login', this.loginForm);
        // if(res.meta.status !== 200) return this.$message.error('登录失败!');
        // this.$message.success('登陆成功');
        // // 1.将登录成功之后的 token, 保存到客户端的 sessionStroage 中
        // //  1.1 项目中除了登录之外的其他 API 接口,必须再登录之后才能访问
        // //  1.2 token 只应再当前网站打开期间生效,所以将 token 保存再 sessionStorage 中
        // // console.log(res);
        // window.sessionStorage.setItem('token', res.data.token)
        // 2.通过编程式导航跳转到后台主页,路由地址是 /home
        this.$router.push('/home')
      })
    }
  }
}
</script>

<style lang="less" scoped="scoped">
	// 页面背景 B
	.login_container {
		background: #2b4b6b;
		height: 100%;
	}

	// 页面背景 E

	// 登录框 B
	.login_box {
		width: 450px;
		height: 300px;
		background-color: #fff;
		border-radius: 3px;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);

		// 固定头像盒子 B
		.avatar_box {
			height: 130px;
			width: 130px;
			border: 1px solid #eee;
			border-radius: 50%;
			padding: 10px;
			box-shadow: 0 0 10px #ddd;
			background: #fff;
			position: absolute;
			left: 50%;
			transform: translate(-50%, -50%);

			img {
				width: 100%;
				height: 100%;
				border-radius: 50%;
				background-color: #eee;
			}
		}

		// 固定头像盒子 E
	}

	// 登录框 E

	// form表单 B
	.login_form {
		width: 100%;
		position: absolute;
		bottom: 0;
		padding: 0 10px;
		box-sizing: border-box;
		// 按钮组件 B
		.btns {
			display: flex;
			justify-content: flex-end;
		}
		// 按钮组件 E
	}
	// form表单 E

</style>
